<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        background-color: #ccc;

    }


    .box1 {
        position: absolute;
        margin-top: 232px;
        width: 200px;
        height: 100px;
        background: url(../images/bear.png) no-repeat;

        /* 元素可以添加多个动画 */
        animation: move 1s steps(8) infinite, tomove 2s forwards;
        /*8*200=1600 让动画8帧走完而且循环*/
    }

    .father {
        margin: 0 auto;
        width: 460px;
        height: 332px;
        background: url(../images/bg1.png);
        border: 5px solid pink;
        animation: bgmove 0.5s steps(4) infinite;
    }

    @keyframes move {
        0% {
            background-position: 0 0;
        }

        100% {
            background-position: -1600px 0;
        }
    }

    @keyframes tomove {
        0% {
            left: 0;
        }

        100% {
            left: 50%;
            transform: translate(-50%);
        }


    }

    @keyframes bgmove {
        0% {
            background-position: 0 0;
        }

        100% {
            background-position: -3840px 0;

        }
    }
</style>

<body>
    <div class="father">
        <div class="box1"></div>
    </div>




</body>

</html>